<template>
    <a-tag :color="pageData.color" style="font-size: 16px">
        {{ pageData.text }}
    </a-tag>
</template>

<script setup lang="ts">
import {inject, onMounted, ref} from "vue";

type PageData ={
    color:string;
    text:string;
}
const pageData = ref<PageData>({
    color:'',
    text:''
})
const node = ref()
const getNode = inject('getNode')

const initData = () => {
    const { color,text } = node.value.getData()
    // console.log("color",color)
    // console.log("text",text)
    pageData.value = {
        color,
        text
    }
}
onMounted(()=>{
    node.value = getNode()
    console.log("TextNode",node)
    initData()
})

</script>

<style scoped>

</style>